<template>
    <div>
        <!--固井设计 -->
        <div>
            <el-card style="height: 100%" class="card">
                <div slot="header">
                    <span>固井设计数据</span>
                </div>

                <!--固井方案 -->
                <el-row class="dataform">
                    <div class="headstyle">固井方案</div>

                    <el-form ref="findform1" :model="findform1" label-width="100px">
                        <el-row>
                            <el-form-item label="固井方式">
                                <el-select v-model="findform1.cementstyle" placeholder="选择固井方式">
                                    <el-option v-for="item in Cement_Select" :label="item" :key="item" :value="item"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-form-item label="固井方案">
                                <el-input type="textarea" style="width: 87%" :rows="8" placeholder="输入固井方案" v-model="findform1.plan">
                                </el-input>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="顶替效率(%)">
                                    <el-input style="width: 80%" placeholder="输入顶替效率" v-model="findform1.displacerate"> </el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="居中度(%)">
                                    <el-input style="width: 80%" placeholder="输入居中度" v-model="findform1.centralizer"> </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" style="float: right">
                                <el-form-item>
                                    <el-button type="primary" @click="formsave1">保存</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>

                <!--扶正器安放 -->
                <el-row class="dataform">
                    <div class="headstyle">扶正器安放</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="addone1">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportCentralizer" :show-file-list="false" action="">
                                <!--这个还没写:http-request="" -->
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="download1">模板下载</el-button>
                        </div>
                    </div>
       
                    <el-table :data="tableData1" border style="width: 100%; font-size: 10px" :max-height="tableHeight" stripe>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="deleteone1(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="topdepth" label="顶深(m)" />
                        <el-table-column align="center" prop="enddepth" label="底深(m)" />
                        <el-table-column align="center" prop="centratype" label="类型" />
                        <el-table-column align="center" prop="outsize" label="外径(mm)" />
                        <el-table-column align="center" prop="distance" label="安放距离(m)" />
                        <!-- <el-table-column align="center" prop="xx" label="安放要求" /> -->
                    </el-table>
                </el-row>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx1"
                        :page-size="pageSizes1"
                        :total="totalData1"
                        @current-change="handlePageChange1"
                    ></el-pagination>
                </div>
                <!--扶正器安放--编辑弹出框 -->
                <el-dialog title="扶正器安放数据" :visible.sync="editVisible1" width="60%">
                    <el-form :model="form1" ref="form1" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="顶深(m)">
                                <el-input v-model="form1.topdepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="底深(m)">
                                <el-input v-model="form1.enddepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型">
                                <el-input v-model="form1.centratype"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="外径(mm)">
                                <el-input v-model="form1.outsize"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="安放距离(m)">
                                <el-input v-model="form1.distance"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item label="安放要求">
                                <el-input v-model="form1.xx"></el-input>
                            </el-form-item>
                        </el-col> -->
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="saveadd1" v-if="isNewData1">确 定</el-button>
                        <el-button type="primary" @click="saveEdit1" v-else>确 定</el-button>
                    </span>
                </el-dialog>

                <!--管串数据 -->
                <el-row class="dataform">
                    <div class="headstyle">管串数据</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="addone2">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportStringDesign" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="download2">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData2"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit2(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="deleteone2(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="name" label="名称" />
                        <el-table-column align="center" prop="number" label="数量" />
                        <el-table-column align="center" prop="topdepth" label="顶深(m)" />
                        <el-table-column align="center" prop="botdepth" label="底深(m)" />
                        <el-table-column align="center" prop="length" label="段长(m)" />
                        <el-table-column align="center" prop="size" label="尺寸(mm)" />
                        <el-table-column align="center" prop="steelgrade" label="钢级" />
                        <el-table-column align="center" prop="wallthickness" label="壁厚(mm)" />
                        <el-table-column align="center" prop="buckletype" label="扣型" />
                        <el-table-column align="center" prop="collapsing" label="抗挤强度(mpa)" />
                        <el-table-column align="center" prop="burst" label="抗内压强度(mpa)" />
                        <el-table-column align="center" prop="tensile" label="抗拉强度(mpa)" />
                    </el-table>
                </el-row>

                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx2"
                        :page-size="pageSizes2"
                        :total="totalData2"
                        @current-change="handlePageChange2"
                    ></el-pagination>
                </div>
                <!--管串数据--编辑弹出框 -->

                <el-dialog title="管串数据" :visible.sync="editVisible2" width="60%">
                    <el-form :model="form2" ref="form2" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="名称">
                                <el-input v-model="form2.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="数量">
                                <el-input v-model="form2.number"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="顶深(m)">
                                <el-input v-model="form2.topdepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="底深(m)">
                                <el-input v-model="form2.botdepth"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="段长(m)">
                                <el-input v-model="form2.length"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="尺寸(mm)">
                                <el-input v-model="form2.size"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="钢级">
                                <el-select v-model="form2.steelgrade" placeholder="选择钢级">
                                    <el-option v-for="item in stellgrade_Select" :label="item" :key="item" :value="item"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="壁厚(mm)">
                                <el-input v-model="form2.wallthickness"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="扣型">
                                <el-select v-model="form2.buckletype" placeholder="选择扣型">
                                    <el-option v-for="item in buckletype_Select" :label="item" :key="item" :value="item"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="抗挤强度(mpa)">
                                <el-input v-model="form2.collapsing"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="抗内压强度(mpa)">
                                <el-input v-model="form2.burst"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="抗拉强度(mpa)">
                                <el-input v-model="form2.tensile"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="saveadd2" v-if="isNewData2">确 定</el-button>
                        <el-button type="primary" @click="saveEdit2" v-else>确 定</el-button>
                    </span>
                </el-dialog>

                <!--隔离液 -->
                <el-row class="dataform">
                    <div class="headstyle">隔离液</div>

                    <el-form ref="findform2" :model="findform2" label-width="120px">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="密度(g/cm^3)">
                                    <el-input style="width: 80%" placeholder="输入密度" v-model="findform2.density"> </el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="流变性">
                                    <el-input style="width: 80%" placeholder="输入流变性" v-model="findform2.rheology"> </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" style="float: right">
                                <el-form-item>
                                    <el-button type="primary" @click="formsave2">保存</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>

                <!--冲洗液 -->
                <el-row class="dataform">
                    <div class="headstyle">冲洗液</div>

                    <el-form ref="findform3" :model="findform3" label-width="120px">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="密度(g/cm^3)">
                                    <el-input style="width: 80%" placeholder="输入密度" v-model="findform3.density"> </el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="流变性">
                                    <el-input style="width: 80%" placeholder="输入流变性" v-model="findform3.rheology"> </el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item label="冲洗效率(%)">
                                    <el-input style="width: 80%" placeholder="输入冲洗效率" v-model="findform3.efficiency"> </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" style="float: right">
                                <el-form-item>
                                    <el-button type="primary" @click="formsave3">保存</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-row>

                <!--水泥浆 -->
                <el-row class="dataform">
                    <div class="headstyle">水泥浆</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="addone3">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportCementSluryDesign" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="download3">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData3"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit3(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="deleteone3(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="cementcategory" label="水泥类别" />
                        <el-table-column align="center" prop="density" label="密度(g/cm^3)" />
                        <el-table-column align="center" prop="fluidity" label="流动度" />
                        <el-table-column align="center" prop="lostwater" label="失水量" />
                        <el-table-column align="center" prop="freewater" label="45°自由液" />
                        <el-table-column align="center" prop="solidtime" label="稠化时间范围(min)" />
                        <el-table-column align="center" prop="pressure24" label="24h抗压强度(mpa)" />
                        <el-table-column align="center" prop="pressure48" label="48h抗压强度(mpa)" />
                        <el-table-column align="center" prop="pressure72" label="72h抗压强度(mpa)" />
                        <el-table-column align="center" prop="cementsection" label="封隔井段" />
                        <el-table-column align="center" prop="temptime" label="稠化过渡时间(min)" />
                    </el-table>
                </el-row>

                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx3"
                        :page-size="pageSizes3"
                        :total="totalData3"
                        @current-change="handlePageChange3"
                    ></el-pagination>
                </div>
                <!--水泥浆--编辑弹出框 -->

                <el-dialog title="水泥浆数据" :visible.sync="editVisible3" width="60%">
                    <el-form :model="form3" ref="form3" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="水泥类别">
                                <el-select v-model="form3.cementcategory" placeholder="选择水泥类别">
                                    <el-option v-for="item in cementcategory_Select" :label="item" :key="item" :value="item"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="密度(g/cm^3)">
                                <el-input v-model="form3.density"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="流动度">
                                <el-input v-model="form3.fluidity"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="失水量">
                                <el-input v-model="form3.lostwater"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="45°自由液">
                                <el-input v-model="form3.freewater"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="稠化时间范围(min)">
                                <el-input v-model="form3.solidtime"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="24h抗压强度(mpa)">
                                <el-input v-model="form3.pressure24"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="48h抗压强度(mpa)">
                                <el-input v-model="form3.pressure48"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="72h抗压强度(mpa)">
                                <el-input v-model="form3.pressure72"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="封隔井段">
                                <el-input v-model="form3.cementsection"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="稠化过渡时间(min)">
                                <el-input v-model="form3.temptime"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible3 = false">取 消</el-button>
                        <el-button type="primary" @click="saveadd3" v-if="isNewData3">确 定</el-button>
                        <el-button type="primary" @click="saveEdit3" v-else>确 定</el-button>
                    </span>
                </el-dialog>

                <!--施工参数设计 -->
                <el-row class="dataform">
                    <div class="headstyle">施工参数设计</div>
                    <div class="inputstyle">
                        <div>
                            <el-button type="success" @click="addone4">新建</el-button>
                        </div>
                        <div style="margin-left: 10px">
                            <el-upload class="upload-demo" :http-request="ImportWorkFLowDesign" :show-file-list="false" action="">
                                <el-button type="success">导入</el-button>
                            </el-upload>
                        </div>
                        <div style="margin-left: 10px">
                            <el-button type="primary" @click="download4">模板下载</el-button>
                        </div>
                    </div>
                    <el-table
                        :data="tableData4"
                        border
                        style="width: 100%; font-size: 10px"
                        :max-height="tableHeight"
                        :header-row-style="rowStyle"
                        :header-cell-style="cellStyle"
                        :row-style="rowStyle"
                        :cell-style="cellStyle"
                        stripe
                    >
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="handleEdit4(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="deleteone4(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="orderNumber" width="60" label="顺序" />
                        <el-table-column align="center" prop="content" width="200" label="操作内容" />
                        <el-table-column align="center" prop="workvol" label="工作量(m^3)" />
                        <el-table-column align="center" prop="density" label="密度(g/cm^3)" />
                        <el-table-column align="center" prop="displacement1" label="最低排量 (m^3/min)" />
                        <el-table-column align="center" prop="displacement2" label="最高排量 (m^3/min)" />
                        <el-table-column align="center" prop="pressure" label="压力 (mpa)" />
                        <el-table-column align="center" prop="worktime" label="施工时间 (min)" />
                        <el-table-column align="center" prop="totaltime" label="累计时间 (min)" />
                        <el-table-column align="center" prop="totalinjection" label="累计注替量 (m^3)" />
                    </el-table>
                </el-row>

                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="pageIdx4"
                        :page-size="pageSizes4"
                        :total="totalData4"
                        @current-change="handlePageChange4"
                    ></el-pagination>
                </div>

                <!--施工参数--编辑弹出框 -->

                <el-dialog title="施工参数数据" :visible.sync="editVisible4" width="60%">
                    <el-form :model="form4" ref="form4" label-width="150px">
                        <el-col :span="12">
                            <el-form-item label="顺序">
                                <el-input v-model="form4.orderNumber"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="操作内容">
                                <el-input v-model="form4.content"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="工作量(m^3)">
                                <el-input v-model="form4.workvol"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="密度(g/cm^3)">
                                <el-input v-model="form4.density"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="最低排量 (m^3/min)">
                                <el-input v-model="form4.displacement1"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="最高排量 (m^3/min)">
                                <el-input v-model="form4.displacement2"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="压力 (mpa)">
                                <el-input v-model="form4.pressure"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="施工时间 (min)">
                                <el-input v-model="form4.worktime"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="累计时间 (min)">
                                <el-input v-model="form4.totaltime"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="累计注替量 (m^3)">
                                <el-input v-model="form4.totalinjection"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editVisible4 = false">取 消</el-button>
                        <el-button type="primary" @click="saveadd4" v-if="isNewData4">确 定</el-button>
                        <el-button type="primary" @click="saveEdit4" v-else>确 定</el-button>
                    </span>
                </el-dialog>
            </el-card>
        </div>
    </div>
</template>

<script>
import {
    CentralizerUpdate,
    FindCentralizer,
    CentralizerAdd,
    CentralizerDelete
} from '../../../api/module/dataClassification/wellSementDesign/pipeDesign/centralizer';

import {
    FindStringDesign,
    StringDesignUpdate,
    StringDesignAdd,
    StringDesignDelete
} from '../../../api/module/dataClassification/wellSementDesign/pipeDesign/string_design';

import {
    FindCementsluryDesign,
    CementsluryDesignDelete,
    CementsluryDesignAdd,
    CementsluryDesignUpdate
} from '../../../api/module/dataClassification/wellSementDesign/slurryDesign/cementslury_design';

import {
    FindWorkflowDesign,
    WorkflowDesignDelete,
    WorkflowDesignAdd,
    WorkflowDesignUpdate
} from '../../../api/module/dataClassification/wellSementDesign/wellSementDesign/workflow_design';

import { importExcel, downTemplateExcel } from '../../../api/module/dataClassification/excel';
import { ListDataDictByCondition } from '../../../api/module/dataClassification/data_classification';
import {
    FindSpacerfluidDesign,
    addSpacerfluidDesign
} from '../../../api/module/dataClassification/wellSementDesign/slurryDesign/spacerfluid_design';

import {
    FindFlushingfluidDesign,
    FlushingfluidDesignEdit
} from '../../../api/module/dataClassification/wellSementDesign/slurryDesign/flushingfluid_design';

import { FindCementPlan, SaveCementPlan } from '../../../api/module/dataClassification/Cement/CementPlan';

export default {
    data() {
        return {
            wellstructureid: localStorage.getItem('wellstructureid'),
            tableHeight: localStorage.getItem('tableHeight'),
            rowStyle: { height: '30px' },
            cellStyle: {
                padding: 0
            },

            editVisible1: false,
            isNewData1: false,

            editVisible2: false,
            isNewData2: false,
            editVisible3: false,
            isNewData3: false,
            editVisible4: false,
            isNewData4: false,
            //查询参数
            searchModel: {
                //查询部分默认的绑定值
                wellName: localStorage.getItem('wellname') //井名
                // wellType: '', //井型
                // wellCategory: '', //井别
                // startDrillDate: '', //开钻日期
                // endDrillDate: '', //完钻日期
                // currentPage: 1, //当前页
                // pageSize: 10 //页大小
            },
            form_sercher: {
                currentPage: 0,
                endDrillDate: localStorage.getItem('endDrillDate'),
                pageSize: 0,
                startDrillDate: localStorage.getItem('startDrillDate'),
                wellCategory: localStorage.getItem('wellCategory'),
                wellName: localStorage.getItem('wellname'),
                wellType: localStorage.getItem('wellType')
            },

            condition: {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            },

            findform1: {
                bitsize: localStorage.getItem('bitsize'),
                caselevel: '',
                casesize: localStorage.getItem('casesize'),
                cementplanid: null,
                cementstyle: null,
                centralizer: null,
                displacerate: null,
                no: localStorage.getItem('no'),
                plan: '',
                wellname: localStorage.getItem('wellname')
            },

            findform2: {
                bitsize: localStorage.getItem('bitsize'),
                caselevel: '',
                casesize: localStorage.getItem('casesize'),
                density: '',
                formula: '',
                no: localStorage.getItem('no'),
                rheology: '',
                spacerfluiddesignid: null,
                supply: '',
                wellname: localStorage.getItem('wellname')
            },
            findform3: {
                bitsize: localStorage.getItem('bitsize'),
                caselevel: '',
                casesize: localStorage.getItem('casesize'),
                density: '',
                efficiency: '',
                flushingfluiddesignid: null,
                formula: '',
                no: localStorage.getItem('no'),
                rheology: '',
                supply: '',
                wellname: localStorage.getItem('wellname')
            },

            Data: {},
            Cement_Select: [], //固井方式下拉
            stellgrade_Select: [], //钢级
            buckletype_Select: [], //扣型
            cementcategory_Select: [], //水泥类别

            //扶正器table
            tableData1: [
                {
                    // topdepth: '1', //顶深
                    // enddepth: '2', //底深
                    // centratype: '3', //类型
                    // outsize: '4', //外径
                    // distance: '5' //安放距离
                }
            ],
            pageIdx1: 1,
            pageSizes1: 10,
            totalData1: 0,
            currentPage1: 1,

            pageIdx2: 1,
            pageSizes2: 10,
            totalData2: 0,
            currentPage2: 1,

            pageIdx3: 1,
            pageSizes3: 10,
            totalData3: 0,
            currentPage3: 1,

            pageIdx4: 1,
            pageSizes4: 10,
            totalData4: 0,
            currentPage4: 1,

            //扶正器编辑form
            form1: {},
            //管串数据表
            tableData2: [{}],
            form2: {},
            //水泥浆数据表
            tableData3: [{}],
            form3: {},
            //施工参数数据表
            tableData4: [{}],
            form4: {}
        };
    },
    created() {
        this.CentralizerFind(); //创建时查询扶正器表格数据
        this.StringDesignFind(); //同上，，管串表格数据
        this.CementsluryDesignFind();
        this.WorkflowDesignFind();

        //查询form
        this.FindCementPlan();
        this.FindSpacerfluidDesign();
        this.FindFlushingfluidDesign();

        this.GetAllSelect(); //获取所有下拉列表
    },
    methods: {
        //扶正器安放模板下载
        download1(){
            downTemplateExcel('Centralizer').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '扶正器数据模板.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        },
        download2() {
            downTemplateExcel('StringDesign').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '管串数据模板.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        },
        download3() {
            downTemplateExcel('CementSluryDesign').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '水泥浆设计数据模板.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        },
        download4() {
            downTemplateExcel('WorkFLowDesign').then((res) => {
                console.log(res);
                if (!res) {
                    return;
                }
                const link = document.createElement('a');
                let blob = new Blob([res]);
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '施工参数设计数据模板.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        },
        FindCementPlan() {
            FindCementPlan(this.wellstructureid)
                .then((res) => {
                    console.log('固井方案查询成功');

                    if (res.data != null) {
                        this.findform1 = res.data;
                    }

                    console.log(res);
                })
                .catch((err) => {
                    console.log('固井方案查询失败');
                    console.log(err);
                });
        },
        GetAllSelect() {
            ListDataDictByCondition('固井方式')
                .then((res) => {
                    // console.log('下拉列表获取成功')
                    this.Cement_Select = res.data;
                })
                .catch((err) => {
                    console.log('下拉列表获取失败');
                });

            ListDataDictByCondition('钢级').then((res) => {
                // console.log('下拉列表获取成功')
                this.stellgrade_Select = res.data;
            });

            ListDataDictByCondition('扣型').then((res) => {
                // console.log('下拉列表获取成功')
                this.buckletype_Select = res.data;
            });
            ListDataDictByCondition('水泥类别').then((res) => {
                // console.log('下拉列表获取成功')
                this.cementcategory_Select = res.data;
            });
        },
        //导入
        //扶正器
        
        ImportCentralizer(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'Centralizer') //传入导入表的名称
                .then((res) => {
                    console.log('导入扶正器');
                    this.$message.success('导入数据成功！');
                    console.log(res);
                    this.CentralizerFind(); //查询该表
                    loading.close()
                })
                .catch((err) => {
                    console.log('导入扶正器失败');
                    console.log(err);
                    loading.close()
                });
        },
        //管串
        ImportStringDesign(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'StringDesign') //传入导入表的名称
                .then((res) => {
                    console.log('导入管串成功');
                    this.$message.success('导入数据成功！');
                    console.log(res);
                    this.StringDesignFind(); //查询该表
                    loading.close()
                })
                .catch((err) => {
                    console.log('导入管串失败');
                    console.log(err);
                    loading.close()
                });
        },

        //水泥浆设计
        ImportCementSluryDesign(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'CementSluryDesign') //传入导入表的名称
                .then((res) => {
                    console.log('导入成功');
                    this.$message.success('导入数据成功！');
                    console.log(res);
                    this.CementsluryDesignFind(); //查询该表
                    loading.close()
                }).catch(err=>{
                    loading.close()
                });
        },
        //施工参数设计
        ImportWorkFLowDesign(item) {
            const loading = this.$loading({
                lock: true,
                text: '数据导入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const formData = new FormData();
            formData.append('file', item.file);
            importExcel(formData, 'WorkFLowDesign') //传入导入表的名称
                .then((res) => {
                    console.log('导入成功');
                    this.$message.success('导入数据成功！');
                    console.log(res);
                    this.WorkflowDesignFind(); //查询该表
                    loading.close()
                }).catch(err=>{
                    loading.close()
                });
        },
        WorkflowDesignFind() {
            FindWorkflowDesign(this.currentPage4, this.pageSizes4, this.condition)
                .then((res) => {
                    console.log('施工参数数据查询接口调用成功参数');
                    console.log(res);
                    this.tableData4 = res.data.records;
                    this.totalData4 = res.data.total;
                })
                .catch((err) => {
                    console.log('施工参数数据查询接口调用失败');
                });
        },
        StringDesignFind() {
            FindStringDesign(this.currentPage2, this.pageSizes2, this.condition)
                .then((res) => {
                    console.log('管串数据查询接口调用成功参数');
                    console.log(res);
                    this.tableData2 = res.data.records;
                    this.totalData2 = res.data.total;
                })
                .catch((err) => {
                    console.log('管串数据查询接口调用失败');
                });
        },

        CentralizerFind() {
            FindCentralizer(this.searchModel.wellName, this.currentPage1, this.pageSizes1)
                .then((res) => {
                    console.log('扶正器查询接口调用成功参数');
                    console.log(res);

                    this.tableData1 = res.data.records;
                    this.totalData1 = res.data.total;
                })
                .catch((err) => {
                    console.log('扶正器查询接口调用失败参数');
                    console.log(err);
                });
        },
        CementsluryDesignFind() {
            FindCementsluryDesign(this.currentPage3, this.pageSizes3, this.condition)
                .then((res) => {
                    console.log('水泥浆查询接口调用成功参数');
                    console.log(res);

                    this.tableData3 = res.data.records;
                    this.totalData3 = res.data.total;
                })
                .catch((err) => {
                    console.log('水泥浆查询接口调用失败参数');
                    console.log(err);
                });
        },
        addone1() {
            this.editVisible1 = true;
            this.isNewData1 = true;
            this.form1 = {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            };
        },
        addone2() {
            this.editVisible2 = true;
            this.isNewData2 = true;
            this.form2 = {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            };
        },
        addone3() {
            this.editVisible3 = true;
            this.isNewData3 = true;
            this.form3 = {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            };
        },
        addone4() {
            this.editVisible4 = true;
            this.isNewData4 = true;
            this.form4 = {
                bitsize: localStorage.getItem('bitsize'),
                casesize: localStorage.getItem('casesize'),
                no: localStorage.getItem('no'),
                wellname: localStorage.getItem('wellname')
            };
        },
        saveadd1() {
            CentralizerAdd(this.form1)
                .then((res) => {
                    console.log('新增扶正器成功123');
                    this.$message.success('新增数据成功！');
                    this.CentralizerFind();
                    this.editVisible1 = false;
                })
                .catch((err) => {
                    console.log('新增扶正器失败123');
                });
        },
        saveadd2() {
            console.log(this.form2);
            StringDesignAdd(this.form2)
                .then((res) => {
                    console.log('新增管串成功123');
                    this.$message.success('新增数据成功！');
                    this.StringDesignFind(); //查询该表
                    this.editVisible2 = false;
                })
                .catch((err) => {
                    console.log('新增管串失败123');
                });
        },

        saveadd3() {
            CementsluryDesignAdd(this.form3)
                .then((res) => {
                    console.log('新增水泥浆成功123');
                    this.$message.success('新增数据成功！');
                    this.CementsluryDesignFind();
                    this.editVisible3 = false;
                })
                .catch((err) => {
                    console.log('新增水泥浆失败123');
                });
        },

        saveadd4() {
            WorkflowDesignAdd(this.form4)
                .then((res) => {
                    console.log("新增施工参数form:",this.form4)
                    console.log('新增施工参数成功123');
                    this.$message.success('新增数据成功！');
                    this.WorkflowDesignFind();
                    this.editVisible4 = false;
                })
                .catch((err) => {
                    console.log('新增施工参数失败123');
                    this.$message.warning('新增数据失败！');
                });
        },

        handleEdit1(index, row) {
            this.editVisible1 = true;
            this.isNewData1 = false;
            this.form1 = row;
        },
        handleEdit2(index, row) {
            this.editVisible2 = true;
            this.isNewData2 = false;
            this.form2 = row;
        },
        handleEdit3(index, row) {
            this.editVisible3 = true;
            this.isNewData3 = false;
            this.form3 = row;
        },
        handleEdit4(index, row) {
            this.editVisible4 = true;
            this.isNewData4 = false;
            this.form4 = row;
        },

        saveEdit1() {
            this.editVisible1 = false;
            //更新操作
            CentralizerUpdate(this.form1)
                .then((res) => {
                    console.log('编辑扶正器成功');
                    this.$message.success('编辑数据成功！');
                })
                .catch((err) => {});
        },

        saveEdit2() {
            StringDesignUpdate(this.form2)
                .then((res) => {
                    console.log('编辑管串成功');
                    this.$message.success('编辑数据成功！');
                    this.editVisible2 = false;
                })
                .catch((err) => {
                    console.log('编辑管串失败');
                });
        },

        saveEdit3() {
            console.group();
            console.log('ces11');
            console.log(this.form3);
            console.groupEnd();
            CementsluryDesignUpdate(this.form3)
                .then((res) => {
                    console.log('编辑水泥浆成功');
                    this.$message.success('编辑数据成功！');
                    this.editVisible3 = false;
                })
                .catch((err) => {
                    console.log('编辑水泥浆失败');
                    console.log(err);
                });
        },

        saveEdit4() {
            WorkflowDesignUpdate(this.form4)
                .then((res) => {
                    console.log('编辑施工参数成功');
                    this.$message.success('编辑数据成功！');
                    this.editVisible4 = false;
                })
                .catch((err) => {this.$message.warning('编辑数据失败！');});
        },

        deleteone1(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                CentralizerDelete(row.centralizerid)
                    .then((res) => {
                        console.log('删除扶正器接口调用成功123');
                        this.$message.success('删除数据成功！');
                        this.CentralizerFind();
                    })
                    .catch((err) => {
                        console.log('删除扶正器接口调用失败123');
                    });
            });
        },

        deleteone2(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                console.log(row.stringdesignid);
                StringDesignDelete(row.stringdesignid)
                    .then((res) => {
                        console.log('删除管串接口调用成功123');
                        this.$message.success('删除数据成功！');
                        this.StringDesignFind();
                    })
                    .catch((err) => {
                        console.log('删除管串接口调用失败123');
                    });
            });
        },
        deleteone3(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                CementsluryDesignDelete(row.cementslurydesignid)
                    .then((res) => {
                        console.log('删除水泥浆接口调用成功123');
                        this.$message.success('删除数据成功！');
                        this.CementsluryDesignFind();
                    })
                    .catch((err) => {
                        console.log('删除水泥浆接口调用失败123');
                    });
            });
        },
        deleteone4(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                WorkflowDesignDelete(row.workflowdesignid)
                    .then((res) => {
                        console.log('删除施工参数设计接口调用成功123');
                        this.$message.success('删除数据成功！');
                        this.WorkflowDesignFind();
                    })
                    .catch((err) => {
                        console.log('删除施工参数接口调用失败123');
                    });
            });
        },

        handlePageChange1(page) {
            this.pageIdx1 = page;
            this.currentPage1 = page;
            this.CentralizerFind();
        },

        handlePageChange2(page) {
            this.pageIdx2 = page;
            this.currentPage2 = page;
            this.StringDesignFind();
        },

        handlePageChange3(page) {
            this.pageIdx3 = page;
            this.currentPage3 = page;
            this.CementsluryDesignFind();
        },

        handlePageChange4(page) {
            this.pageIdx4 = page;
            this.currentPage4 = page;
            this.WorkflowDesignFind();
        },

        //序号自增方法
        indexFn(index) {
            index = index + 1 + (this.page - 1) * this.per_page;
            return index;
        },

        FindSpacerfluidDesign() {
            FindSpacerfluidDesign(this.wellstructureid)
                .then((res) => {
                    console.log('查询隔离液成功');
                    if (res.data != null) {
                        this.findform2 = res.data;
                    }

                    console.log(res);
                })
                .catch((err) => {
                    console.log('查询隔离液失败');
                });
        },
        FindFlushingfluidDesign() {
            FindFlushingfluidDesign(this.wellstructureid)
                .then((res) => {
                    console.log('查询冲洗液成功');
                    if (res.data != null) {
                        this.findform3 = res.data;
                    }
                    console.log(res);
                })
                .catch((err) => {
                    console.log('查询冲洗液失败');
                });
        },
        formsave1() {
            SaveCementPlan(this.wellstructureid, this.findform1)
                .then((res) => {
                    console.log('保存固井方案成功');
                    this.$message.success('保存成功！');
                    console.log(res);
                })
                .catch((err) => {
                    console.log('保存固井方案失败');
                    console.log(err);
                });
        },
        formsave2() {
            console.log('保存隔离液开始');

            console.log(this.findform2);
            console.log(this.wellstructureid);
            addSpacerfluidDesign(this.wellstructureid, this.findform2)
                .then((res) => {
                    this.$message.success('保存成功！');
                    console.log('保存隔离液成功');
                })
                .catch((err) => {
                    console.log('保存隔离液失败');
                    console.log(err);
                });
        },
        formsave3() {
            FlushingfluidDesignEdit(this.wellstructureid, this.findform3)
                .then((res) => {
                    this.$message.success('保存成功！');
                    console.log('保存冲洗液成功');
                })
                .catch((err) => {
                    console.log('保存冲洗液失败');
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
.card >>> .el-card__body {
    padding: 5px;
}
.card >>> .el-card__header {
    font-size: 17px;
    padding: 5px 10px;
    /* padding: 5px 10px !important; */
    height: 40px;
    line-height: 30px;
    background-color: #eef0f6;
}
.headstyle {
    height: 25px;
    font-size: 14px;
    padding: 5px 10px;
    background-color: hsl(225, 39%, 48%);
    color: white;
}
.dataform {
    width: 97%;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
}
.inputstyle {
    margin-left: 13px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}
form {
    margin-top: 10px;
}
/* 利用穿透，设置input边框隐藏 */
.inputDeep >>> .el-input__inner {
    border: 0;
}

/* excel文件导入样式 */
/* .upload-demo {
    width: 80px;
    margin-left: 10px;
    display: inline-block;
    margin-top: 10px;
    margin: auto;
} */
/* .upload-demo >>> button {
    margin-top: 5px;
    margin-left: 10px;
} */
/* .upload-demo >>> .el-upload--text {
    width: 70px;
    height: 40px;
    border-radius: 3px;
    border: none;
    position: absolute;
    top: 35px;
    
} */
.upload-demo >>> .el-upload--text {
    width: 57px;
    height: 50px;
    border-radius: 0px;
    border: none;
    display: flex;
    align-items: center;
}
</style>
